import React, { Component } from "react";
import { Bind } from "lodash-decorators";

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      textareaValue: "",
      selectValue: "",
      isJoin: false,
      guestNum: '',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
    this.handleTextarea = this.handleTextarea.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSubmit(e) {
    console.log(this.state);
    e.preventDefault();
  }
  handleInput(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }
  handleTextarea(e) {
    this.setState({
      textareaValue: e.target.value,
    });
  }
  handleSelect(e) {
    this.setState({
      selectValue: e.target.value,
    });
  }

  @Bind()
  handleFile(e) {
    console.log(e);
    console.log(this.state);
  }

  @Bind()
  handleAddFile() {
    console.log(this.fileInput);
  }
  @Bind()
  handleChangeJoin(e) {
    const target = e.target;
    const type = target.type;
    const name = target.name;
    const value = type === "checkbox" ? target.checked : target.value;
    this.setState({
      [name]: value,
    });
  }
  componentDidMount() {
    this.setState({
      inputValue: "1111",
      textareaValue: "2222",
      selectValue: "banana",
    });
  }

  render() {
    const { inputValue, textareaValue, selectValue, selectArr } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="ipt">
          名字：
          <input type="text" value={inputValue} onChange={this.handleInput} />
        </label>
        <hr />
        <textarea value={textareaValue} onChange={this.handleTextarea} />
        <hr />
        <select value={selectValue} onChange={this.handleSelect}>
          <option value="apple">苹果</option>
          <option value="banana">香蕉</option>
          <option value="grape">葡萄</option>
        </select>
        <hr />
        <input
          onChange={this.handleFile}
          ref={(ipt) => (this.fileInput = ipt)}
          type="file"
        />
        <button type="button" onClick={this.handleAddFile}>
          上传
        </button>
        <hr />
        <div>
          <label htmlFor="join">
            参与
            <input
              name="isJoin"
              type="checkbox"
              checked={this.state.isJoin}
              id="join"
              onChange={this.handleChangeJoin}
            />
          </label>
          <label htmlFor="num">
             人数
            <input
              type="text"
              name="guestNum"
              id="num"
              value={this.state.guestNum}
              onChange={this.handleChangeJoin}
            />
          </label>
        </div>
        <button type="submit">提交</button>
      </form>
    );
  }
}
export default Form;
